<template>
  <SettingDrawer
    v-if="getIsFixedSettingDrawer && (!getShowMultipleTab || getFullContent)"
    :class="prefixCls"
  />
  <SessionTimeoutLogin v-if="getIsSessionTimeout" />
</template>
<script lang="ts" setup>
  import { computed, unref } from 'vue'

  import { useRootSetting } from '@/hooks/setting/useRootSetting'
  import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
  import { useDesign } from '@/hooks/web/useDesign'
  import { useUserStoreWithOut } from '@/store/modules/user'

  import { SettingButtonPositionEnum } from '@/enums/appEnum'
  import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'

  import SessionTimeoutLogin from '@/views/sys/login/SessionTimeoutLogin.vue'

  import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting'

  defineOptions({ name: 'LayoutFeatures' })

  const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue'))

  const { getShowSettingButton, getSettingButtonPosition, getFullContent } = useRootSetting()
  const userStore = useUserStoreWithOut()
  const { prefixCls } = useDesign('setting-drawer-feature')
  const { getShowHeader } = useHeaderSetting()

  const getIsSessionTimeout = computed(() => userStore.getSessionTimeout)

  const getIsFixedSettingDrawer = computed(() => {
    if (!unref(getShowSettingButton)) {
      return false
    }
    const settingButtonPosition = unref(getSettingButtonPosition)

    if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
      return !unref(getShowHeader) || unref(getFullContent)
    }
    return settingButtonPosition === SettingButtonPositionEnum.FIXED
  })

  const { getShowMultipleTab } = useMultipleTabSetting()
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-setting-drawer-feature';

  .@{prefix-cls} {
    display: flex;
    position: absolute;
    z-index: 10;
    top: 45%;
    right: 0;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 6px 0 0 6px;
    background-color: @primary-color;
    color: @white;
    cursor: pointer;

    svg {
      width: 1em;
      height: 1em;
    }
  }
</style>
